<template>
    <div class="login-container">
        <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
            <div class="title-container">
                <h3 class="title">考试管理平台</h3>
            </div>
            <el-form-item prop="username">
                <el-input
                  ref="username"
                  v-model="loginForm.username"
                  placeholder="账号"
                  name="username"
                  type="text"
                  tabindex="1"
                  clearable
                />
            </el-form-item>
            
            <el-form-item prop="password">
                <el-input
                  :key="passwordType"
                  ref="password"
                  v-model="loginForm.password"
                  :type="passwordType"
                  placeholder="请输入密码"
                  name="password"
                  tabindex="2"
                  show-password
                  clearable
                />
            </el-form-item>
            
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              @click="handleLogin"
            >登录
            </el-button
            >
        </el-form>
    </div>
</template>

<script>
import { validUsername } from "@/utils/validate";

export default {
    name: "Login",
    created() {
        localStorage.removeItem("userInfo");
    },
    data() {
        const validateUsername = (rule, value, callback) => {
            if (validUsername(value)) {
                callback(new Error("请输入正确的用户名"));
            } else {
                callback();
            }
        };
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error("密码不得低于6位数"));
            } else {
                callback();
            }
        };
        return {
            loginForm: {
                username: "",
                password: ""
            },
            loginRules: {
                username: [
                    { required: true, trigger: "blur", validator: validateUsername }
                ],
                password: [
                    { required: true, trigger: "blur", validator: validatePassword }
                ]
            },
            loading: false,
            passwordType: "password"
        };
    },
    methods: {
        handleLogin() {
            // 表单验证
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    // 发送登录请求
                    this.$store
                      .dispatch("user/login", this.loginForm)
                      .then(() => {
    
                          this.$router.push({ path: this.redirect || "/" });
                          this.loading = false;
                      })
                      .catch(() => {
                          this.loading = false;
                      });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
    .login-container {
        background-image: url("../../assets/bg.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        .title-container {
            text-align: center;
            color: white;
            margin-bottom: 50px;
        }
    }
</style>
